<template>
  <div :id="pid" class="player-toolbar normal" :class="{'large': size === 1, 'small': size === 2}" @dblclick.stop @mousemove.stop @mouseleave="mouseleave">
    <div class="player-toolbar--row">
      <div class="player-toolbar--left">
        <slot />
        <slot name="left" />
      </div>
      <div class="player-toolbar--more" :class="{'on': more}" @click="more = !more">
        <i class="iconfont icon-zhixiang-zhishiqishang" c-tip="更多" c-tip-class="c-tip-normal" />
      </div>
      <div class="player-toolbar--right">
        <slot name="right" />
      </div>
    </div>
    <div v-show="more" class="player-toolbar--row">
      <div class="player-toolbar--left">
        <slot />
        <slot name="left" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['max', 'min'],
  data() {
    return {
      pid: this.UUID(),
      more: false,
      size: false
    };
  },
  mounted() {
    const $p = $('#' + this.pid)[0];
    this.resizeObserver = new ResizeObserver(() => {
      this.size = false;
      if($p.offsetWidth > (this.max || 1600)) {
        this.size = 1;
      }
      if($p.offsetWidth < (this.min || 500)) {
        this.size = 2;
      }
      this.init();
    });
    this.resizeObserver.observe($p);
  },
  methods: {
    /**
     * 初始化
     */
    async init() {
      this.$nextTick(() => {
        const $p = $('#' + this.pid)[0];
        const $toolbarLeft = $('#' + this.pid + ' .player-toolbar--row:eq(0) .player-toolbar--left');
        const $toolbarMore = $('#' + this.pid + ' .player-toolbar--row:eq(0) .player-toolbar--more');
        const $toolbarSecend = $('#' + this.pid + ' .player-toolbar--row:eq(1) .player-toolbar--left');
        $toolbarMore.removeAttr('style');
        let count = 0, rw = 0;
        $toolbarLeft.children().each(function(i) {
          if(this.offsetLeft + this.offsetWidth > $toolbarLeft[0].offsetWidth) {
            $(this).css('cssText', 'visibility: hidden');
            $toolbarSecend.children().eq(i).removeAttr('style');
            if(++count === 1) {
              const $prev =  $(this).prev()[0];
              rw = $toolbarLeft[0].offsetWidth - $prev.offsetLeft - $prev.offsetWidth;
            }
          }else {
            $(this).removeAttr('style');
            $toolbarSecend.children().eq(i).css('cssText', 'display: none !important');
          }
        });
        if(count) {
          $toolbarMore.css('cssText', 'visibility: visible; margin-right: '+ rw +'px');
        }
        this.$emit('resize', $p.offsetHeight + 'px');
      });
    },
    /**
     * 鼠标离开关闭更多
     */
    mouseleave() {
      this.more = false;
    },
  },
  beforeDestroy() {
    this.resizeObserver && this.resizeObserver.disconnect();
  },
}
</script>
<style lang="scss" scoped>
.player-toolbar{
  --barHeight: 40px;
  --barFontSize: 20px;
  --barTextFontSize: 14px;
  --barZoomFontSize: 26px;
  --barMargin: 12px;
  --barSelectWidth: 66px;
  --barSelectHeight: 28px;
  &.large{
    --barHeight: 60px;
    --barFontSize: 26px;
    --barTextFontSize: 20px;
    --barZoomFontSize: 32px;
    --barMargin: 12px;
    --barSelectWidth: 80px;
    --barSelectHeight: 32px;
  }
  &.small{
    --barMargin: 3px;
  }
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 98;
  opacity: 0;
  &:hover{
    opacity: 1;
  }
  &--row{
    width: 100%;
    height: var(--barHeight);
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: var(--barFontSize);
    cursor: default;
    padding: 0 12px;
    &:nth-child(2){
      position: absolute;
      bottom: var(--barHeight);
      left: 0;
    }
  }
  &--left, &--more, &--right{
    display: flex;
    align-items: center;
    position: relative;
    min-width: 0;
    > *{
      line-height: 1;
      margin-right: var(--barMargin);
      cursor: pointer;
      font-size: inherit;
      &:last-child{
        margin-right: 0;
      }
    }
    .ttext{
      font-size: var(--barTextFontSize);
      white-space: nowrap;
      font-style: normal;
      padding: 0 2px;
    }
    .zoom{
      font-size: var(--barZoomFontSize);
    }
    .select{
      width: var(--barSelectWidth) !important;
      min-width: var(--barSelectWidth) !important;
      height: var(--barSelectHeight) !important;
      line-height: var(--barSelectHeight) !important;
      font-size: var(--barTextFontSize) !important;
      &:before{
        display: none;
      }
      /deep/ .el-input{
        font-size: inherit !important;
        .el-input__inner{
          font-size: inherit !important;
        }
      }
      /deep/ .el-input__suffix{
        .el-input__suffix-inner{
          i{
            font-size: inherit !important;
          }
        }
      }
      /deep/ .el-select-dropdown__item{
        font-size: inherit !important;
      }
      &.big{
        width: calc(var(--barSelectWidth) + 6px) !important;
        min-width: calc(var(--barSelectWidth) + 6px) !important;
      }
    }
  }
  &--left{
    flex: 1;
  }
  &--more{
    visibility: hidden;
    padding: 0 8px 0 4px;
    &.on{
      i{
        transform: rotate(180deg);
      }
    }
  }
  .opened{
    background: #FFFFFF;
    border-radius: 4px;
    color: #000;
  }
}
</style>
